<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">


        function ChildInput(props){
            return (
                <div>
                    <input type='text' ref={props.callback}/>
                </div>
            )
        }
      
        class App extends React.Component{
     
            // this.descRef = 
            descRef = React.createRef()  // {current:null}

            callback = (e)=>{
                this.nameRef  = e
            }

            handleClick = ()=>{
                //验证 子组件获取到
                console.log(this);

                //手动获取焦点
                // this.nameRef.focus()

                // 其他 
                // this.ageRef.focus()
                this.descRef.current.focus()

            }

            render(){
                return (
                    <div>
                      name： <ChildInput callback={this.callback}/>

                      age: <input type='text' name='age'  ref={e=>this.ageRef=e}/>

                      desc: <input type='text' name='age'  ref={this.descRef}/>

                    <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }

            componentDidMount(){
                // 自动获取焦点
                // this.nameRef.focus()
            }
        }

       

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>